<template>
  <!-- 注册模块 -->
  <div class="register flexbox_column">
    <div class="logo flexCenter">
      <img src="@/assets/image/login/warehouse.png" alt="" class="img" />
    </div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="账户：" prop="username" class="mb0">
        <el-input
          v-model="ruleForm.username"
          maxlength="10"
          autocomplete="off"
          show-word-limit
          placeholder="账户"
        ></el-input>
      </el-form-item>

      <el-form-item label="密码：" prop="password" class="mb0">
        <el-input
          v-model="ruleForm.password"
          show-password
          maxlength="20"
          show-word-limit
          autocomplete="off"
          placeholder="密码"
        ></el-input>
      </el-form-item>

      <el-form-item label="确认密码" prop="confirm_password" class="mb0">
        <el-input
          v-model="ruleForm.confirm_password"
          show-password
          maxlength="20"
          show-word-limit
          autocomplete="off"
          placeholder="确认密码"
        ></el-input>
      </el-form-item>

      <el-form-item label="邮箱" prop="email" class="mb0">
        <el-autocomplete
          v-model="ruleForm.email"
          :fetch-suggestions="querySearchEmail"
          :trigger-on-focus="false"
          style="width: 100%;"
          placeholder="邮箱"
        >
        </el-autocomplete>
      </el-form-item>

      <!-- <el-form-item label="姓名"
                    prop="desc"
                    class="mb0">
        <el-input v-model="ruleForm.desc"
                  placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="公司名称"
                    prop="desc"
                    class="mb0">
        <el-input v-model="ruleForm.desc"
                  placeholder="公司名称"></el-input>
      </el-form-item>

      <el-form-item label="手机号"
                    prop="desc"
                    class="mb0">
        <el-input v-model="ruleForm.desc"
                  type="number"
                  placeholder="区号-手机号"></el-input>
      </el-form-item>

      <el-form-item label="联系电话"
                    prop="desc"
                    class="mb0">
        <el-input v-model="ruleForm.desc"
                  type="number"
                  placeholder="区号-电话号-分机号"></el-input>
      </el-form-item>

      <el-form-item label="联系地址："
                    prop="desc"
                    class="mb0">
        <el-input v-model="ruleForm.desc"
                  placeholder="联系地址"></el-input>
      </el-form-item>

      <el-form-item label="验证码"
                    prop="desc"
                    class="mb0">
        <el-input v-model="ruleForm.desc"
                  placeholder="验证码"></el-input>
      </el-form-item> -->

      <el-form-item class="flexbox_row mb0">
        <el-col :span="12" class="flexbox">
          <el-button type="primary" @click="submitForm('ruleForm')">立即注册</el-button>
        </el-col>

        <el-col :span="12" class="flexbox">
          <el-button @click="resetForm('ruleForm')">已有账号，立即登录</el-button>
        </el-col>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import User from '@/lin/model/user'

export default {
  name: 'Register',

  data() {
    return {
      loading: false,
      ruleForm: {},
      rules: {
        username: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'change' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'change' },
        ],
        confirm_password: [
          { required: true, message: '请输入确认密码', trigger: 'change' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'change' },
          {
            required: true,
            trigger: 'change',
            validator: (rule, value, callback) => {
              const val = this.ruleForm.password
              if (value && val && value !== val) {
                callback(new Error('密码不一致'))
              } else {
                callback()
              }
            },
          },
        ],
        email: [{ required: true, message: '请输入邮箱', trigger: 'change' }],
      },
    }
  },

  methods: {
    querySearchEmail(queryString, callback) {
      const emailList = [
        { value: '@qq.com' },
        { value: '@126.com' },
        { value: '@163.com' },
        { value: '@sina.com' },
        { value: '@21cn.com' },
        { value: '@sohu.com' },
        { value: '@yahoo.com.cn' },
        { value: '@tom.com' },
        { value: '@etang.com' },
        { value: '@eyou.com' },
        { value: '@56.com' },
        { value: '@x.cn' },
        { value: '@chinaren.comsogou.com' },
        { value: '@citiz.com' },
      ]
      let results = []
      const queryList = []
      emailList.forEach(item => {
        queryList.push({ value: queryString.split('@')[0] + item.value })
      })
      results = queryString ? queryList.filter(this.createFilter(queryString)) : queryList
      callback(results)
    },

    // 邮箱填写过滤
    createFilter(queryString) {
      return item => item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    },

    async startRegister() {
      const params = this.ruleForm
      try {
        this.loading = true
        const RES = await User.getCustomRegister(params)
        this.loading = false
        if (RES.code == 1) {
          this.$message.success('注册成功')
          this.resetForm()
        } else {
          this.$message.warning('注册失败')
        }
      } catch (e) {
        this.loading = false
        console.log(e)
      }
    },

    submitForm() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          console.log(valid)
          this.startRegister()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()

      this.$emit('close')
    },
  },
}
</script>

<style lang="scss" scoped>
.register {
  padding: 30px;
  overflow-x: hidden;
  overflow-y: visible;
}

.logo {
  width: 100%;
  height: 100px;

  .img {
    width: 200px;
    height: 100px;
  }
}
::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
}
::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  background-color: rgba($color: #513f8a, $alpha: 0.4);
  border-radius: 3px;
}
</style>
